<!--这是试卷详情-->
<template>
	<div style="margin: 20px 20px 0 20px;">
    <div class="bg-f5f7fa padding20 clearfix margin-t margin-b40">
      <div class="fl clearfix">
        <img class="fl margin-r" :src="topicInfo.avatar != null && topicInfo.avatar != '' && topicInfo.avatar != ' ' ? topicInfo.avatar : 'https://knowledge-payment.oss-cn-beijing.aliyuncs.com/examTopic/2018-06-11/X7m4nR4D9em6ngpNzUxxRJdcj2GQ71GPKAC3aKiq.png' " width="120" height="120">
        <div class="fl">
          <div class="margin-b40 font-s16 color-222">{{ topicInfo.name }}</div>
          <div class="color-ff3b3b font-s14">&yen{{topicInfo.price}}</div>
          <div class="margin-t30 color-999 font-s12">售出：{{topicInfo.subscribers}}</div>
        </div>
      </div>
      <div class="fr">
        <b v-if="permission==3" @click="linkToEditPaper(topicInfo.topicId)">编辑</b><span v-if="permission==3" class="color-409">|</span>
        <b @click="singleHandle(-1)" v-if="topicInfo.isGrounding == 1&&permission==3">下架</b>
        <b @click="singleHandle(1)" v-if="topicInfo.isGrounding == -1&&permission==3">上架</b>
        <span v-if="permission==3" class="color-409">|</span>
        <b @click="handCopy(topicInfo.topicUrl, $event)">复制链接</b>

      </div>
   </div>
		<div class="clearfix margin-b">
      <div v-if="permission==3" class="fl">
        <router-link :to="{path:'/testManage/createPaper/' + this.topicId } ">
          <el-button type="primary">新建试卷</el-button>
        </router-link>
        <el-button @click="toAddPapers">添加已有试卷</el-button>
      </div>
			<div class="fr">
				<el-input v-model="listQuery.searchName" placeholder="请输入试卷名称" @keyup.enter.native="handleFilter" style="width: 250px" clearable></el-input>
				<el-button class="search" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
			</div>
		</div>
		<div style="margin: 0 20px 10px;">
      <el-tabs v-model="listQuery.changeTab" @tab-click="handleClick">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="已发布" name="1"></el-tab-pane>
        <el-tab-pane label="未发布" name="-1"></el-tab-pane>
      </el-tabs>
      <paperDetail :permission="permission" :paperData="paperData" :listQuery="listQuery" v-loading="listLoading" ></paperDetail>
		</div>
    <addPaper v-show="isShowAddPaper" @hideAddPaper="hideAddPaper" :topicId="this.topicId"></addPaper>
	</div>
</template>

<script>
import paperDetail from './paperDetail.vue'
import addPaper from './addPaper.vue'
import { toGetName, toGetPapers, toSingleHandle } from '@/api/paper'
import clip from '@/utils/clipboard'
import { knowledge_test } from '@/utils/permission'
export default {
  components: { paperDetail, addPaper },
  data() {
    return {
      permission: 3,
      listQuery: {
        // 查询的过滤条件
        currentPage: 1, // 当前页
        topicId: null,
        isGrounding: null,
        changeTab: null,
        searchName: null,
        total: null, // 数据总条数
        page: 1
      },
      activeName: 'all', // 选中的tab页
      isShowAddPaper: false, // 是否显示添加已有试卷组件
      topicInfo: {
        name: null,
        avatar: null
      },
      paperData: [],
      listLoading: false
    }
  },
  created() {
    this.topicId = this.$route.params.topicId
    this.listQuery.topicId = this.$route.params.topicId
    this.getTopicName(this.topicId)
    // 获取专题下的试卷列表
    this.getPaperInTopic(this.listQuery)
    this.getModelPermission()
  },
  watch: {
    // // 监听路由名称变化 重新调用数据
    $route: function(to, from) {
      if (to.name == 'paperDetail') {
        this.topicId = to.params.topicId
        this.listQuery.topicId = to.params.topicId
        this.getTopicName(this.topicId)
        // 获取专题下的试卷列表
        this.getPaperInTopic(this.listQuery)
      }
    }
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_test()
    },
    linkToEditPaper(id) {
      this.$router.push({ path: `/testManage/editTopics/${id}` })
    },
    getTopicName(topicId) {
      // 根据ID查找该专题下得试卷
      toGetName(topicId).then(res => {
        // 正确回调
        this.topicInfo = res.data.data
      })
        .catch(err => {
          console.log(err)
        })
    },
    getPaperInTopic(listQuery) {
      // 根据ID查找该专题下得试卷
      this.listLoading = true
      toGetPapers(listQuery).then(res => {
        // 正确回调
        this.paperData = res.data.data.data
        this.listQuery.total = res.data.data.total
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    hideAddPaper(msg) {
      this.isShowAddPaper = msg
      this.getPaperInTopic(this.listQuery)
    },
    handleClick() {
      // tab页的
      this.listQuery.page = 1
      this.getPaperInTopic(this.listQuery)
    },
    handleFilter() {
      // 搜索的方法
      this.listQuery.page = 1
      this.listQuery.changeTab = ''
      this.getPaperInTopic(this.listQuery)
    },
    toAddPapers() {
      this.isShowAddPaper = true
    },
    handCopy(url, event) {
      clip(url, event)
    },
    singleHandle(type) {
      var data = { 'topicId': this.topicId, 'type': type }
      toSingleHandle(data).then(res => {
        // 正确回调
        if (type == 1) {
          this.$message({
            message: '上架成功!',
            type: 'info'
          })
        } else {
          this.$message({
            message: '下架成功!',
            type: 'info'
          })
        }

        this.getTopicName(this.topicId)
      })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted() {}
}
</script>
<style scoped>
h3 {
  background: #eee;
  border-bottom: 1px solid #eee;
  padding-left: 20px;
  font-weight: 500;
  font-size: 12px;
  line-height: 30px;
  margin: 0;
}
</style>
